<template>
    <div>
        <div style="display: flex;font-weight: bold;align-items: center">
            <div class="iconfont icon-gerenzhongxin" v-if="!islogin" style="margin-right: 10px;" @click="login">登录|注册</div>
            <div v-if="user!==null" style="padding-right: 10px;">
                <el-dropdown>
                    <span class="el-dropdown-link iconfont icon-gerenzhongxin">
                    {{user.username}}
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item @clcik="myorder">我的订单</el-dropdown-item> -->
                        <el-dropdown-item @click="shiftVIPcenter">个人中心</el-dropdown-item>
                        <el-dropdown-item @click="logoutAccount">退出</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="iconfont icon-gouwuche" @click="$router.push('/shoppingCart')">购物车</div>
        </div>
        <el-dialog
        v-model="dialogShow"
        center
        :show-close="false"
        title="欢迎登录官网"
        style="width: 40%;"
        >
            <el-tabs stretch style="width: 70%;margin: 0 auto;">
                <el-tab-pane label="短信快速登录/注册">
                    <SMSquickLogin></SMSquickLogin>
                </el-tab-pane>
                <el-tab-pane label="账号密码登录">
                    <accountAndPwdLogin></accountAndPwdLogin>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
import { logout } from '@/utils/api/login';
import accountAndPwdLogin from './accountAndPwdLogin.vue';
import SMSquickLogin from './SMSquickLogin.vue';
export default {
    data(){
        return {
            dialogShow:false,
            activeName:"phone"
        }
    },
    computed:{
        user(){
            return this.$store.state.user
        },
        dialogShow(){
            return this.$store.state.UAPdialogShow
        },
        islogin(){
            this.$store.state.user=JSON.parse(localStorage.getItem('user'))
            // console.log(this.user,"user")
            return this.$store.state.islogin
        }
    },
    components:{
        accountAndPwdLogin,
        SMSquickLogin
    },
    methods:{
        login(){
            this.$store.state.UAPdialogShow=true
        },
        shiftVIPcenter(){
            this.$store.state.account.type="个人中心"
            this.$router.push({
                path:"/VIPcenter"
            })
        },
        logoutAccount(){
            const that=this
            logout(that.user.userId).then((data)=>{
                localStorage.removeItem("user")
                that.$store.state.user=null
                that.$store.state.islogin=false
            })
        },
        // myorder(){
        //     // this.$store.state.account.type="我的订单"
        //     this.$router.push({
        //         path:"/VIPcenter"
        //     })
        // }
    },
    created(){
        console.log("用户",localStorage.getItem("user"))
    }
}
</script>

<style>
    @import url("../assets/css/iconfont.css");
    .iconfont{
        font-size: 20px;
    }
    .icon-gerenzhongxin:before,.icon-gouwuche:before{
        margin-right: 5px;
    }
</style>